<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/pub_footer.css" />
		<link rel="stylesheet" type="text/css" href="../css/pub_head.css" />
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript" src="../layui/layui.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/register2.css" />
		<link rel="stylesheet" href="../css/login.css">
	</head>
	<body>
	<div id="head" th:include="../static/publichtml/public_pageHead :: footer1"></div><!-- 头部导入 -->
		<div class="layui-container">
			<div id="top" class="layui-row ">
				<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
					<!-- top的div下分两份， -->
					<div class="layui-row">
						<!-- 再分一半 -->
						<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
						</div>
						<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
							<img src="../images/login/4da3aa8a72600bf007b857fd56b73a7ebf4aa766.jpeg" />
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
					<div class="layui-row">
						<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
						</div>
						<div class=" layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-md-offset6">
							<div class="father ">
								<i id="i_img"></i>
								<div class="service  inline">
									<span>客服热线</span>
									<p>400-600-0716</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="split-line"></div>
		<div class="reg_warp">
			<div class="reg_context">
				<div class="reg_conlogintext_info">
					<form class="layui-form" id="userInfo">
						<div class="context-title">
							<h3>本地买房就上荆州好房子</h3>
						</div>
						<div class="reg-line">
							<label class="reg-title">手机号码：</label>
							<input class="re-input" id="phoneNumber" type="text" placeholder="请输入您的手机号码" name="phone"/>
							<label class="err phone hidden">手机号码格式不正确！</label>
							<label class="err hidden" id="existsPhone">该手机号码已注册</label>
						</div>
						<div class="reg-line relative">
							<label class="reg-title">验证码：</label>
							<input class="re-input" id="yzmValue" type="text" placeholder="请输入您获得的验证码" name="yzm"/>
							<input type="button" id="yzm" value="发送验证码" />
							<label class="err message hidden">短信验证码格式不正确！</label>
						</div>
						<div class="reg-line">
							<label class="reg-title">设置密码：</label>
							<input class="re-input" id="pwd" type="text" placeholder="密码长度6~16，字母区分大小写" name="password"/>
							<label class="err pwd hidden">密码不得少于6个字符或超过16个字符！</label>
						</div>
						<div class="reg-line">
							<label class="reg-title">密码确认：</label>
							<input class="re-input " lay-verify="required" id="checkPwd" type="text" placeholder="重新输入一次密码"/>
							<label class="err checkPwd hidden">两次密码不一致，请重新输入！</label>
						</div>
						<div class="reg-line">
							<input type="button" onclick="checkip()" class="submit" lay-submit="" name="log_submit" value="立即注册" />
							<div>
								<i class="agree"></i><span>同意 <a href="#">《会员注册协议》</a> <a href="#">《隐私条款》</a></span>
							</div>
						</div>

					</form>
				</div>
				<div class="reg_context_login ">
					<div class="login-box">
						<div id="login-btn">
							<p>已经注册了？点击登陆或使用下面合作账号直接登陆</p>
							<a class="reg-btn qqlogin" href="#"><i class="btn-i" id="regicon_qq"></i><span class="btn-span">QQ登录</span></a>
							<a class="reg-btn wechatlogin" href="#"><i class="btn-i" id="regicon_wechat"></i><span class="btn-span">微信登录</span></a>
							
							<div class="explain">
								<div id="split-line">
								</div>
								<h5>说明</h5>
								<span>1、您可以通过用户名、手机号来登陆；</span>
								<span>2、如果忘记密码,请找回密码或者拨打我们的客服热线<label id="s-red">400-600-0716</label>咨询帮助；</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div id="footer"></div>
		<script>
			//表单是否提交
			function checkip(){
				var flag = true;
				console.log($("#pwd").val());
				console.log($("#checkPwd").val());
				// 密码字段不为空且长度小于十六
				if($("#pwd").val() == "" || $("#pwd").val() == undefined /*|| $("#pwd").val().length >16*/){
					alert("密码格式错误")
					flag = false;
				}


				//手机号格式不为空且长度为11 且手机号没注册过
				if($("#phoneNumber").val() == "" || $("#phoneNumber").val() == undefined || $("#phoneNumber").val().length != 11 || ! $("#existsPhone").hasClass("hidden") || $("#phoneNumber").val().length < 6){
					alert("手机号格式不正确");
					flag = false;
				}

				//判断验证码不为空，且长度为6
				if($("#yzmValue").val() == "" || $("#yzmValue").val() == undefined || $("#yzmValue").val().length !=6){
					alert("验证码格式错误！")
					flag = false;
				}

				//两次密码一致
				if($("#pwd").val() != $("#checkPwd").val()){
					alert("两次密码不一致");
					flag = false;
				}
				if(flag==true){
					$.ajax({
						url:"/backer/register",
						type:"post",
						data:$("#userInfo").serialize(),
						success:function(data){
							if (data === "注册成功！"){
								location.href = "/backer/user";
							}else{
								alert(data);
							}
						}
					});
				}
			}


			$(function(){
				//判断手机号格式
				$("#phoneNumber").blur(function(){
					var phoneNumber = $("#phoneNumber").val();
					if(phoneNumber.length != 11){
						$(".phone").removeClass("hidden");
						flag =  false;
					}else{
						$(".phone").addClass("hidden");
						flag =  true;
						$.ajax({
							url : "/backer/checkPhoneNumber",
							type: "post",
							data : {"phone":$("#phoneNumber").val()},
							dataType: "json",
							success:function (data){
								console.log(data);
								if(!data){
									$("#existsPhone").removeClass("hidden");
								}else {
									$("#existsPhone").addClass("hidden");
								}
							}
						})
					}



				});

				//判断密码长度
				$("#pwd").blur(function(){
					var pwd = $("#pwd").val();
					if(pwd.length < 6 || pwd.length > 16){
						$(".pwd").removeClass("hidden");
					}else{
						$(".pwd").addClass("hidden");
						var pwd = $("#pwd").val();
						var pwd2 = $("#checkPwd").val();
						if(pwd !== pwd2 ){
							$(".checkPwd").removeClass("hidden");
							flag = false;
						}else{
							$(".checkPwd").addClass("hidden");
							flag = true;
						}
					}
				});

				//判断两次密码一致
				$("#checkPwd").blur(function(){
					var pwd = $("#pwd").val();
					var pwd2 = $("#checkPwd").val();
					if(pwd !== pwd2 ){
						$(".checkPwd").removeClass("hidden");
						flag = false;
					}else{
						$(".checkPwd").addClass("hidden");
						flag = true;
					}
				});

				//$("#head").load("../publichtml/public_pageHead.html");
				$("#footer").load("../publichtml/pub_footer.html");
				var yzmdjs = 60;
				var djsI;
				function  yzmdjsf(){
					yzmdjs--;
					if(yzmdjs==0){
						$("#yzm").val("发送验证码");
						$("#yzm").css("background-color","#2ca5dc");
						$("#yzm").removeAttr("disabled");
						clearInterval(djsI);
					}else{
						$("#yzm").val("已发送("+yzmdjs+")");
					}
				}
				//点击验证码发送验证码
				$("#yzm").click(function(){
					if($("#phoneNumber").val() != "" && $("#phoneNumber").val() != undefined ){
						$(this).css("background-color","#ccc");
						$(this).val("已发送(60)");
						$(this).attr("disabled","disabled");
						djsI=setInterval(yzmdjsf,1000);
						$.ajax({
							url: "/public/Message",
							type: "post",
							data: {"phone":$("#phoneNumber").val()},
							success(data){
								if(data){
									alert("验证码已发送，注意查收！");
								}else{
									alert("发送失败")
								}

							}
						})
					}else {
						alert("手机号为空")
					}
				});



				//判断表单各项不为空且格式正确
				var checkForm = function(){
					var list = $(".hidden");
					var vals =[];
					vals.push($("#pwd").val());
					vals.push($("#checkPwd").val());
					vals.push($("#phoneNumber").val());
					vals.push($("#yzmValue").val());
					for (var i=0;i<vals.length;i++)
					{
						if(vals[i]== undefined || vals[i] == ""){
							flag = false;
						}
					}
					if(!flag){
						$(".submit").attr("disabled","true");
					}else if(list.length<4){
						$(".submit").removeAttr("disabled");
					}
				}

			})
		</script>
	</body>
</html>
